<template>
	<view>
		<!-- 遮罩层 -->
		<view v-if="isOpen" style=" z-index: 150; top: 0; position: fixed; width: 100vw; height: 100vh; background:rgba(0,0,0,0.5)">
			<view style=" background-color: #FFFFFF; border-radius: 10rpx; width: 600rpx; height: 500rpx; position: absolute; top: 40%; left: 50%; transform: translate(-50%,-50%);">
				<view style="height: 400rpx; width: 100%;">
					<scroll-view style="height: 400rpx;" :scroll-y="true">
						<view v-if="e.checkInfo.checkedIdCard" class="ul">
							<view class="li"></view>
							<text>身份证正面照片错误</text>
						</view>
						
						<view v-if="e.checkInfo.checkedIdReverse" class="ul">
							<view class="li"></view>
							<text>身份证反面照片错误</text>
						</view>
						
						<view v-if="e.checkInfo.checkedNation" class="ul">
							<view class="li"></view>
							<text>户口本照片错误</text>
						</view>
						
						<view v-if="e.checkInfo.checkedPerson" class="ul">
							<view class="li"></view>
							<text>个人照片错误</text>
						</view>
						
						<view v-if="e.checkInfo.checkedBank" class="ul">
							<view class="li"></view>
							<text>开户行错误</text>
						</view>
						
						<view v-if="e.checkInfo.checkedIdCardNo" class="ul">
							<view class="li"></view>
							<text>身份证号错误</text>
						</view>
						
						<view v-if="e.checkInfo.checkedBankNo" class="ul">
							<view class="li"></view>
							<text>银行卡号错误</text>
						</view>
						
						<view style="color: #BD2C00;" class="ul">
							<view style="font-weight: 800; margin-left: 20rpx; font-size: 35rpx;" >意见：{{e.opinion}}</view>
						</view>
						
						<view style="height: 30rpx;"></view>
						
					</scroll-view>
				</view>
				<view @tap="closeMask" style="height: 100rpx; border-top: 1rpx solid #CCCCCC; width: 100%; text-align: center; font-size: 40rpx; line-height: 100rpx; ">确定</view>
			</view>
		</view>

		<view v-if="isApply" >
			<view style="display: flex; margin-top: 50rpx;">
				<view style=" margin: 50rpx 30rpx 0rpx; width: 50rpx; height: 50rpx; background-color: #4DBAFF; border-radius: 50%;">
				</view>
				<view style="line-height: 50rpx; margin-left: 30rpx;">
					<view style="font-weight: 800;">{{apply.taskName}}</view>
					<view v-if="apply.handleTime != null">{{apply.handleTime}}</view>
					<view>{{returnRes(apply.state)}}</view>
				</view>
			</view>

			<view>
				<view :class="chu.state == 3?'fail-line':''" style=" position: absolute; left: 52rpx; transform: translate( 0 , -40rpx);  height: 200rpx; width: 5rpx; background-color: #4DBAFF;"></view>
			</view>

			<view style="display: flex; margin-top: 120rpx;">
				<view :class="chu.state == 3?'fail':''" style=" margin: 50rpx 30rpx 0rpx; width: 50rpx; height: 50rpx; background-color: #4DBAFF; border-radius: 50%;">
				</view>
				<view style="line-height: 50rpx; margin-left: 30rpx;">
					<view style="font-weight: 800;">{{chu.taskName}}</view>
					<view v-if="chu.handleTime != null">{{chu.handleTime}}</view>
					<view>
						{{returnRes(chu.state)}}
						<text @tap="getFailureReason(chu.handleOpinion)" v-if="chu.state == 3" style=" display: inline-block; margin-left: 30rpx; color: #02C9FC;">查看原因</text>
					</view>
					<!-- <view style="display: inline; color: #02C9FC;" v-if="chu.state == 3">查看原因</view> -->
				</view>
			</view>

			<view>
				<view :class="fu.state == 3?'fail-line':''" style=" position: absolute; left: 52rpx; transform: translate( 0 , -40rpx);  height: 200rpx; width: 5rpx; background-color: #4DBAFF;"></view>
			</view>

			<view style="display: flex; margin-top: 120rpx;">
				<view :class="fu.state == 3?'fail':''" style=" margin: 50rpx 30rpx 0rpx; width: 50rpx; height: 50rpx; background-color: #4DBAFF; border-radius: 50%;">
				</view>
				<view style="line-height: 50rpx; margin-left: 30rpx;">
					<view style="font-weight: 800;">{{fu.taskName}}</view>
					<view v-if="fu.handleTime != null">{{fu.handleTime}}</view>
					<view>
						{{returnRes(fu.state)}}
						<text @tap="getFailureReason(fu.handleOpinion)" v-if="fu.state == 3 && chu.state != 3" style=" display: inline-block; margin-left: 30rpx; color: #02C9FC;">查看原因</text>
					</view>
				</view>
			</view>
		</view>
		
		
		<view v-else style="margin-top: 300rpx; width: 100%; text-align: center; font-size: 35rpx; ">
			暂无申请记录
		</view>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni/uni-nav-bar/uni-nav-bar.vue';
	import uniSteps from '@/components/uni/uni-steps/uni-steps.vue'

	export default {
		components: {
			uniNavBar,
			uniSteps
		},
		data() {
			return {
				isApply:false,
				apply: {},
				chu: {},
				fu: {},
				isOpen: false,
				e: {}
			}
		},
		async onLoad() {
			try{
				uni.showLoading({
					title: '加载中'
				});
				const res = await this.$api.UserProcessInfo({});
				uni.hideLoading();
				
				if (res.data.result != null) {
					this.isApply = false
					var procData = JSON.parse(res.data.result.procData);
					var processStep = res.data.result.processStep;
					console.log(processStep)
					this.apply = processStep.apply;
					this.chu = processStep.chu;
					this.fu = processStep.fu;
					if (this.chu.state == 3) {
						//解析失败原因
						this.chu.handleOpinion = JSON.parse(this.chu.handleOpinion)
						console.log(this.chu.handleOpinion)
					}
					
					if (this.fu.state == 3) {
						//解析失败原因
						this.fu.handleOpinion = JSON.parse(this.fu.handleOpinion)
						console.log(this.fu.handleOpinion)
					}
				
				} else {
					this.isApply = false
					console.log('无申请记录')
				}
				console.log(this.apply)
			}catch(e){
				//TODO handle the exception
				this.isApply = false
			}

		},
		methods: {
			closeMask(){
				this.isOpen = false;
			},
			getFailureReason(e) {
				console.log(e);
				this.e = e
				this.isOpen = true
			},
			returnRes(code) {
				var s = ''
				if (code == 1) {
					s = '审核中'
				} else if (code == 2) {
					s = '通过'
				} else {
					s = '未通过'
				}
				return s
			},
			backLastPage() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style>
	.fail{
		background-color: #ff7070 !important;
	}
	
	.fail-line{
		background-color: #ff7070 !important;
	}
	
	.ul text {
		line-height: 20rpx;
	}
	
	.ul::before{
		content: '';
		width: 100%;
		height: 40rpx;
		display: block;
	}

	.ul {
		display: flex;
		flex-wrap: wrap;
		margin-top: 0rpx;
		margin-left: 30rpx;
	}

	.li {
		margin-right: 20rpx;
		background-color: #000000;
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
	}
</style>
